<template>
  <view class="equipment-other">
    <image
      :src="
        imgBaseUrl +
        (equipment.online != 3 ? 'home_wifi.png' : 'home_wifi_no.png')
      "
      class="status"
    ></image>

    <image
      :src="imgBaseUrl + 'equipment_bao.png'"
      mode=""
      class="safe"
      v-if="equipment.hasSafe"
    />
    <view class="icon">
      <image
        :src="imgBaseUrl + 'yujing.png'"
        mode=""
        class="yujing"
        v-if="equipment.warn_num"
      />
      <image
        :src="
          imgBaseUrl + (equipment.online != 3 ? 'shebei2.png' : 'shebei1.png')
        "
        mode=""
        class="equipment"
      />
    </view>

    <view class="status-line">
      <view class="line" :class="{ error: equipment.warn_num }"></view>
    </view>
  </view>
</template>

<script>
import { imgBaseUrlV1, imgBaseUrlV2 } from "@/common/config";

export default {
  props: {
    equipment: {
      type: Object,
      default: null,
    },
    imgBaseUrl: {
      default: imgBaseUrlV2,
    },
    imgBaseUrlV1: {
      default: imgBaseUrlV1,
    },
  },
};
</script>

<style lang="stylus" scoped>
.equipment-other {
  position: relative;
  height: 100%;

  >.status {
    display: block;
    width: 40rpx;
    height: 40rpx;
  }

  >.safe {
    position: absolute;
    display: block;
    width: 44rpx;
    height: 44rpx;
    right: 0;
    top: 0;
  }

  >.icon {
    position: relative;
    min-height: 80rpx;

    >.equipment {
      display: block;
      width: 80rpx;
      height: 80rpx;
      margin: auto;
    }

    >.yujing {
      position: absolute;
      z-index: 2;
      display: block;
      width: 32rpx;
      height: 32rpx;
      right: 18rpx;
    }
  }

  >.status-line {
    position: absolute;
    bottom: 10rpx;
    left: 0;
    width: 100%;

    >.line {
      width: 100rpx;
      height: 4rpx;
      background: #3BC54F;
      border-radius: 2rpx;
      margin: 0 auto;

      &.error {
        background: linear-gradient(347deg, #DB452A 0%, #FF9775 100%);
      }
    }
  }
}
</style>